<template>
  <div class="box">
    <div class="Image">
      <img :src="goods.image" alt="" />
      <p style="font-size: 22px">
        <strong>
          {{ goods.name }}
        </strong>
      </p>
      <p style="color: #ddd; margin: 5px 0">
        {{ "月售" + goods.sellCount + "份" + " " + "好评率" + goods.rating + "%" }}
      </p>
      <p style="padding-bottom: 20px">
        <span style="color: red">
          <small> ￥ </small>
          <strong>
            <big style="font-size: 20px">
              {{ goods.price }}
            </big>
          </strong>
          <van-button
            round
            type="info"
            style="float: right"
            size="mini"
            @click="shopping(goods)"
            >加入购物车</van-button
          >
        </span>
        <span style="color: #ddd" v-show="goods.oldPrice">
          <strong>
            <small>
              <big>
                <s> ￥{{ goods.oldPrice }} </s>
              </big>
            </small>
          </strong>
        </span>
      </p>
    </div>

    <div class="introDuction">
      <p>商品介绍</p>
      <p style="padding: 0 26px">
        {{ goods.info }}
      </p>
    </div>

    <div class="evalute">
      <p>商品评价</p>
      <p class="bton">
        <button>全部</button>
        <button>推荐</button>
        <button>吐槽</button>
      </p>
      <p>只看有内容的评价</p>
      <div v-for="(item, index) in goods.ratings" :key="index" class="evaluation">
        <p>
          <small>{{ item.rateTime }}</small>
          <span>
            <small>{{ item.username }}</small>
            <img :src="item.avatar" class="userImage" />
          </span>
        </p>
        <p>
          {{ item.text }}
        </p>
      </div>
    </div>
    <Btn />
  </div>
</template>

<script>
import Btn from "@/components/Button/Footer.vue";
export default {
  components: { Btn },
  name: "",
  data() {
    return {
      goods: {},
    };
  },
  mounted() {
    this.goods = this.$store.state.Detail;
  },
  methods: {
    // 加入购物车
    shopping(obj) {
      console.log(obj);
      this.$toast.success('加入购物车成功')
      obj['num']=1;
      this.$store.commit('shops',obj)
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 617px;
  overflow: auto;
  background: #ddd;
  .Image {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #888;
    img {
      width: 100%;
      height: 300px;
    }
    p {
      padding: 2px 15px;
    }
  }
  .introDuction,
  .evalute {
    margin-top: 20px;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    background: #fff;
    padding: 15px 0;
    & > p:nth-of-type(1) {
      padding-left: 15px;
      font-size: 18px;
    }
  }
  .bton {
    margin: 0 15px;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    button {
      padding: 10px 20px;
      margin-right: 10px;
      border: none;
    }
    button:nth-of-type(1) {
      background: blue;
      color: #fff;
    }
    button:nth-of-type(2) {
      background: skyblue;
    }
    button:nth-of-type(3) {
      background: #ddd;
    }
  }
  .evaluation {
    margin: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    & > p:nth-of-type(1) {
      display: flex;
      justify-content: space-between;
      small {
        color: #ddd;
        font-size: 14px;
      }
    }

    .userImage {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
}
</style>
